'use client'

import { 
  Box, 
  Editable, 
  EditableInput, 
  EditablePreview,
  Text,
  useColorModeValue,
  Input
} from '@chakra-ui/react'

interface ChapterHeaderProps {
  title: string;
  subtitle?: string;
  onTitleChange?: (title: string) => void;
  onSubtitleChange?: (subtitle: string) => void;
}

export const ChapterHeader = ({
  title,
  subtitle,
  onTitleChange,
  onSubtitleChange
}: ChapterHeaderProps) => {
  const bgColor = useColorModeValue('white', 'gray.900')
  const borderColor = useColorModeValue('gray.200', 'gray.700')
  
  return (
    <Box
      p={4}
      bg={bgColor}
      borderBottom="1px"
      borderColor={borderColor}
    >
      <Input
        value={title}
        onChange={(e) => onTitleChange?.(e.target.value)}
        placeholder="章节标题"
        fontSize="2xl"
        fontWeight="bold"
        variant="unstyled"
        mb={2}
      />
      {subtitle && (
        <Input
          value={subtitle}
          onChange={(e) => onSubtitleChange?.(e.target.value)}
          placeholder="章节副标题"
          fontSize="md"
          variant="unstyled"
        />
      )}
    </Box>
  )
} 